/**
  animation.css 的使用
 */

<template>
  <div>
    <div class="content-box">
      <button @click="onToggle">toggle</button>
      <transition
          name="fade"
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:after-enter="afterEnter"
          v-on:enter-cancelled="enterCancelled"
          v-on:before-leave="beforeLeave"
          v-on:leave="leave"
          v-on:after-leave="afterLeave"
          v-on:leave-cancelled="leaveCancelled"
      >
        <div v-show="isShow" class="box">是否显示</div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    onToggle() {
      this.isShow = !this.isShow;
    },
    beforeEnter(){
      console.log('')
      console.log('show -- beforeEnter')
    },
    enter(){
      console.log('show -- enter')
    },
    afterEnter(){
      console.log('show -- afterEnter')
    },
    enterCancelled(){
      console.log('show -- enterCancell')
    },
    beforeLeave(){
      console.log('')
      console.log('hide -- beforeLeave')
    },
    leave(){
      console.log('hide -- leave')
    },
    afterLeave(){
      console.log('hide -- afterLeave')
    },
    leaveCancelled(){
      console.log('hide -- leaveCancelled')
    },
  }
};
</script>

<style scoped lang="scss">
  $times:1s;
  .box{
    width:100px; height:100px;
    text-align: center; line-height:100px;
    background:purple;
    transition: all $times;
  }

  .fade-enter{
    background:red;
  }
  .fader-enter-active{
    background:green;
  }
  .fader-enter-to{
    background:yellow;
  }
</style>
